<template>
  <el-dialog width="500px" title="员工导入" :visible="showExcelDialog" @close="$emit('update:showExcelDialog', false)">
    <el-row type="flex" justify="center">
      <div class="upload-excel">
        <input ref="excel-upload-input" class="excel-upload-input" type="file" accept=".xlsx, .xls" @change="uploadChange">
        <!-- @dragover 拖着一直动 -->
        <!-- @dragenter 拖进来 -->
        <!-- @drop 松开手 -->
        <div class="drop" @drop="handleDrop" @dragover="handleDragover" @dragenter="handleDragover">
          <i class="el-icon-upload" />
          <el-button type="text" @click="downLoadTemplate">下载导入模板</el-button>
          <span>将文件拖到此处或
            <el-button type="text" @click="handleUpload">点击上传</el-button>
          </span>
        </div>
      </div>
    </el-row>
    <el-row type="flex" justify="end">
      <!-- update:props属性名，值 直接修改 .sync修饰符的属性值 -->
      <el-button size="mini" type="primary" @click="$emit('update:showExcelDialog', false)">取消</el-button>
    </el-row>
  </el-dialog>
</template>
<script>
import { getExportTemplate, uploadExcel } from '@/api/employee'
import { saveAs } from 'file-saver'
export default {
  props: {
    showExcelDialog: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    handleDragover(e) {
      // 处理兼容性问题
      e.stopPropagation()
      e.preventDefault()
      // 拷贝源文件上传，支持的值还有 move、link（快捷方式）
      e.dataTransfer.dropEffect = 'copy'
    },
    handleDrop(e) {
      // 阻止冒泡
      e.stopPropagation()
      // 阻止默认行为
      e.preventDefault()
      // !拿到文件信息（拖拽拿文件信息就是这么拿的）
      const files = e.dataTransfer.files
      // 只支持拖一个文件
      if (files.length !== 1) {
        this.$message.error('Only support uploading one file!')
        return
      }
      // 取第一个文件
      const rawFile = files[0]

      // 判断是不是 Excel
      if (!this.isExcel(rawFile)) {
        this.$message.error('Only supports upload .xlsx, .xls, .csv suffix files')
        return false
      }
      // 调用上传逻辑
      this.uploadChange(rawFile, true)

      e.stopPropagation()
      e.preventDefault()
    },
    isExcel(file) {
      return /\.(xlsx|xls|csv)$/.test(file.name)
    },
    async downLoadTemplate() {
      saveAs(await getExportTemplate(), '上传模板.xlsx')
    },
    // 如何拿到文件信息？
    // 点击普通的上传按钮的时候，找到 file dom 框，主动触发它的点击，监听原生 input file 框的 change 事件，在 change 回调中就可以拿到文件信息啦
    handleUpload() {
      this.$refs['excel-upload-input'].click()
    },
    async uploadChange(e, isDrag = false) {
      // const files = e.target.files
      // if (files.length > 0) {}
      let file
      // 如果是拖拽过来的直接使用文件
      if (isDrag) {
        file = e
      } else {
        // 点击上传过来的
        file = e.target.files?.[0]
      }
      if (file) {
        try {
          // #0 加工成 formData
          const f = new FormData()
          // key 不能乱写，是后端固定的，值就是文件信息
          f.append('file', file)
          // #1 上传到后端
          await uploadExcel(f)
          // #2 前端更新数据
          this.$emit('getDepartments')
          // #3 关闭弹框
          this.$emit('update:showExcelDialog', false)
          // #4 提示
          this.$message.success('导入成功')
        } catch (e) {
          console.log(e)
        } finally {
          // !把 input file 框种的 value 清空，防止两次上传同一个文件不触发 onchange
          this.$refs['excel-upload-input'].value = ''
        }
      }
    }
  }
}
</script>

<style scoped lang="scss">
    .upload-excel {
        display: flex;
        justify-content: center;
        margin: 20px;
        width: 360px;
        height: 180px;
        align-items: center;
        color: #697086;

        .excel-upload-input {
            display: none;
            z-index: -9999;
        }

        .btn-upload,
        .drop {
            border: 1px dashed #dcdfe6;
            width: 100%;
            height: 100%;
            text-align: center;
            line-height: 160px;
            border-radius: 8px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .drop {
            line-height: 40px;
            color: #bbb;

            i {
                font-size: 60px;
                display: block;
                color: #c0c4cc;
            }
        }
    }
</style>
